<template>
  <div class="atBox">
    <div class="atTop">
      <!--导航栏组件-->
      <AuthortableNavbar v-if="isNavbar" />
      <!--筛选组件-->
      <AuthorFiltrate />
    </div>
    <!--数据列表组件-->
    <AuthorContentList />
    <!--筛选弹出框-->
    <AuthorPopup v-if="store.state.popup.isPopup" />
    <AuthorCity v-if="store.state.area.isArea" />
  </div>
</template>

<script>
import AuthorFiltrate from "@/views/authorTable/component/AuthorFiltrate";
import AuthorContentList from "@/views/authorTable/component/AuthorContentList";
import AuthortableNavbar from "@/views/authorTable/component/AuthortableNavbar";
import AuthorPopup from "@/views/authorTable/component/AuthorPopup";
import { useStore } from "vuex";
import useScroll from "@/hooks/UseScroll";
import AuthorCity from "@/views/authorTable/component/AuthorCity";
export default {
  name: "authorTable",
  components: {
    AuthorCity,
    AuthorPopup,
    AuthortableNavbar,
    AuthorContentList,
    AuthorFiltrate,
  },
  setup() {
    //滚动条滚动方向
    const { isNavbar, scrollOld } = useScroll();
    //筛选弹出框控制
    const store = useStore();
    return {
      isNavbar,
      scrollOld,
      store,
    };
  },
};
</script>

<style scoped>
.atBox {
  width: 100%;
  height: 100%;
  background-color: #f7f8fa;
  padding-top: 4.1rem;
  box-sizing: border-box;
}
.atTop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
</style>
